<template>
    <div class="col-sm-12">
    <div class="form-horizontal">
      <div class="site-bgcolor">
        <br>
        <div class="form-group">
          <label for="titleAdd" class="col-sm-2 control-label">标题</label>

          <div class="col-sm-4">
            <input class="form-control" id="titleAdd" name="titleAdd"
                   v-model="item.caption">
          </div>
        </div>

        <div class="form-group">
          <label for="contentAdd" class="col-sm-2 control-label">内容</label>

          <div class="col-sm-4">
            <textarea class="form-control" id="contentAdd" name="titleAdd"
                   v-model="item.content"></textarea>
          </div>
        </div>

        <div class="form-group">
          <label for="originnameAdd" class="col-sm-2 control-label">文件名</label>

          <div class="col-sm-4">
            <input class="form-control" id="originnameAdd" name="titleAdd"
                   v-model="item.originname">
          </div>
        </div>

        <form id="uploadForm" name="uploadForm">
          <div class="form-group">
            <label for="fileId2" class="col-sm-2 control-label">文件</label>

            <div class="col-sm-4">
              <input class="form-control" id="fileId2" type="file" name="file"/>
            </div>
          </div>
        </form>
          <file-upload post-action="/post.method" put-action="/put.method"></file-upload>
        <div class="form-group">
          <div class="col-sm-3 col-md-push-9">
            <button class="btn btn-default" v-on:click="onCancelClick()">取消</button>
            <button class="btn btn-default" v-on:click="onSubmitClick(file)">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .site-bgcolor {
    background: AliceBlue
  }
</style>
<script>
  // import VueFileUpload from 'vue-file-upload'
  import FileUpload from 'vue-upload-component'
/*  Vue.component('file-upload', function(resolve) {
    require(['path-to/vue.file-upload.js','path-to/vue.pretty-bytes.js'], resolve);
  });*/
  export default {
    name: 'itemEdit',
    data: function () {
      return {
        uuid: '',
        urlwiki: '6efbad71-7644-468c-9773-cabcb302e676/children'
      }
    },
    props: ['item', 'mode', 'url'],
    components: {FileUpload},
    methods: {
      onCancelClick: function () {
        this.$dispatch('component', 'modeList')
      },
      onSubmitClick: function () {
        var formData = new window.FormData(document.forms.namedItem('uploadForm'))
        if (this.mode === 'modeAddNew') {
          console.log(this.item.originname)
          this.$http.post(this.url + this.urlwiki, this.item).then(function (response) {
            this.uuid = response.data.uuid
            console.log(this.uuid)
            var suffix = response.data.originname.substring(response.data.originname.lastIndexOf('.') + 1)
            var filename = response.data.uuid + '.' + suffix
            formData.append('name', response.data.uuid + '.' + suffix)
            formData.append('file', document.forms.namedItem('uploadForm'))
            this.upload(formData, this.uuid, filename)
            this.$dispatch('finditem')
            this.$dispatch('component', 'modeList')
            window.alert('提交成功 ')
            this.item = {}
          }, function (response) {
            window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
          })
        } else {
          this.$http.put(this.url + this.item.id, this.item).then(function (response) {
            window.alert('修改成功 ')
            this.$dispatch('component', 'modeList')
          }, function (response) {
            this.$dispatch('finditem')
            window.alert('failed to update,Probably failed to connect the backend server! Pls check your server status! ')
          })
        }
      },
      upload: function (formData, uuid, filename) {
        var list = this.item
        list.originname = filename
        console.log(filename)
        this.$http.post(this.url + uuid + '/children', this.item).then(function (response) {

        }, function (response) {
          window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
        })
        this.$http.post('http://euvee.vicp.co/rest/file/', formData).then(function (response) {
        }, function (response) {
          window.alert('文件提交失败! 状态码：' + response.status)
        })
      }
    }
  }
</script>
